<template>
	<div class="background">
		<div class="search">
			<input type="text" v-model="query" @keyup.enter="submit()">
			<span onclick="window.history.go(-1)">取消</span>
		</div>
		<div class="hot_search">
			<h2>热门搜索</h2>
			<button v-for="item in hotSearch" @click="serch(item.id)">{{item.name}}</button>
		</div>
	</div>
</template>

<script>
	export default {
    data () {
      return {
        query: '',
        hotSearch: [
          {name: '金刚狼3', id: '25765735'},
          {name: '一条狗的使命', id: '6873143'},
          {name: '生化危机:终章', id: '20471852'},
          {name: '乐高蝙蝠侠', id: '26145033'},
          {name: '爱乐之城', id: '25934014'},
          {name: '欢乐好声音', id: '26354572'}
        ]
      }
    },
    methods: {
      submit: function () {
        this.$router.push({path: '/searchResult', query: { name: this.query }})
        this.query = ''
      },
      serch: function (str) {
        const path = '/movie/' + str
        this.$router.push({path: path})
      }
    }
  }
</script>

<style scoped>
	.background {
		background-color: #e5e9f2;
		position: fixed;
		top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    overflow: scroll;
	}
	.search {
		padding: 10px;
	}
	.search input {
		border-radius: 15px;
		border:0;
		outline: none;
		height: 25px;
		width: 65%;
		padding-left: 2em;
	}
	.search span{
		display: inline-block;
		text-align: right;
		line-height: 27px;
		font-size: 14px;
		width: 50px;
		background-color: #999;
		border-radius:10px;
		text-align: center;
		float: right;
		color: #fff;
	}
	 .hot_search {
    padding: 10px;
  }
  .hot_search h3 {
    font-size: 16px;
  }
  .hot_search button {
    background-color: white;
    border-style: none;
    padding: 5px;
    margin-right: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #e54847;
  }
</style>